<?xml version="1.0" encoding="UTF-8"?>
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:fc="http://java.sun.com/jsf/composite/fluttercode/component"
	xmlns:fn="http://java.sun.com/jsp/jstl/functions"
	template="/WEB-INF/templates/template.xhtml">
	<ui:define name="content">

		<f:metadata>
			<f:viewParam name="firstResult" value="#{studentSearch.firstResult}" />
			<f:viewParam name="pageSize" value="#{studentSearch.pageSize}" />
			<f:viewParam name="firstName"
				value="#{studentSearch.criteria.firstName}" />
			<f:viewParam name="lastName"
				value="#{studentSearch.criteria.lastName}" />
			<f:viewParam name="teacherId"
				value="#{studentSearch.criteria.teacherId}" />

		</f:metadata>

		<h:outputScript name="jsf.js" library="javax.faces" target="head" />

		<h:form id="searchForm">
			<fc:panel caption="Search Criteria">
				<fc:property caption="First Name" isInput="true">
					<h:inputText value="#{studentSearch.criteria.firstName}"
						autocomplete="false"
						valueChangeListener="#{studentSearch.firstNameChangeListener}">
						<f:ajax execute="@form" render=":searchForm:results" event="keyup" />
					</h:inputText>
				</fc:property>
				<fc:property caption="Last Name" isInput="true">
					<h:inputText value="#{studentSearch.criteria.lastName}" autocomplete="false">
						<f:ajax execute="@form" render=":searchForm:results" />
					</h:inputText>
				</fc:property>
				<fc:property caption="Teacher" isInput="true">
					<h:selectOneMenu value="#{studentSearch.criteria.teacherId}">
						<f:selectItems value="#{teacherItems}" />
						<f:ajax execute="@form" render=":searchForm:results" />
					</h:selectOneMenu>
				</fc:property>

				<h:commandButton action="#{studentSearch.refresh}" value="Search" />
			</fc:panel>

			<ui:fragment rendered="#{empty studentSearch.results}">
				<h2>No Results Found</h2>
			</ui:fragment>
			<ui:fragment rendered="#{!empty studentSearch.results}">
				<h:dataTable value="#{studentSearch.results}" var="v_student"
					id="results" styleClass="dataTable" rowClasses="even,odd">
					<h:column>
						<f:facet name="header">Id</f:facet>
						<h:outputText value="#{v_student.id}" />
					</h:column>
					<h:column>
						<f:facet name="header">Name</f:facet>
						<h:outputText value="#{v_student.name}" />
					(<h:link outcome="personView" value="details">
							<f:param name="personId" value="#{v_student.id}" />
						</h:link>)
				</h:column>

					<h:column>
						<f:facet name="header">Courses</f:facet>
						<ui:repeat var="v_course" value="#{v_student.enrolled}">
							<h:link outcome="courseView">
						#{v_course.code}
							<f:param name="courseId" value="#{v_course.id}" />
							</h:link>
						</ui:repeat>
					</h:column>
				</h:dataTable>
				<h:commandButton action="#{studentSearch.first}" value="First" />
				<h:commandButton action="#{studentSearch.previous}" value="Previous"
					rendered="#{studentSearch.firstResult gt 0}" />
				<h:commandButton action="#{studentSearch.next}" value="Next"
					disabled="#{!studentSearch.nextPageAvailable}" />
				<h:panelGroup style="border-top: 1px solid #d0d0d0; margin: 8px"
					layout="block">
					<h:link outcome="personEdit" value="Add New Student"
						style="margin-right : 12px">
						<f:param name="type" value="student" />
					</h:link>

					<h:link outcome="personEdit" value="Add New Teacher"
						style="margin-right : 12px">
						<f:param name="type" value="teacher" />
					</h:link>

				</h:panelGroup>
			</ui:fragment>

		</h:form>

	</ui:define>
</ui:composition>
